<!-- @author zhengjie -->
<template>
  <div class="icon-body">
    <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </el-input>
    <div class="icon-list scroll">
      <div class="list_option" v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)" v-show="item.indexOf('-')== -1">
        <svg-icon :icon-class="item" style="height: 30px;width: 16px;"/>
        <span>{{ item }}</span>
      </div>
      <div class="noData" v-if="!iconList.length">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="auto" viewBox="0 0 300 318" version="1.1">
          <title>编组 3</title>
          <g id="app-首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="设计规范" transform="translate(-107.000000, -1448.000000)">
                  <g id="编组-3" transform="translate(107.000000, 1448.000000)">
                      <path d="M226,56 C228.761424,56 231.261424,57.1192881 233.071068,58.9289322 C234.880712,60.7385763 236,63.2385763 236,66 L236,66 L236,247 C236,249.761424 234.880712,252.261424 233.071068,254.071068 C231.261424,255.880712 228.761424,257 226,257 L226,257 L63.5674343,257 L76,207.735709 L76,66 C76,63.2385763 77.1192881,60.7385763 78.9289322,58.9289322 C80.7385763,57.1192881 83.2385763,56 86,56 L86,56 Z" id="矩形" stroke="#979797" stroke-width="4"/>
                      <path d="M75.5,209.5 L75.5,245 C75.5,248.175637 74.2128187,251.050637 72.131728,253.131728 C70.0506373,255.212819 67.1756373,256.5 64,256.5 C60.8243627,256.5 57.9493627,255.212819 55.868272,253.131728 C53.7871813,251.050637 52.5,248.175637 52.5,245 L52.5,245 L52.5,209.5 L75.5,209.5 Z" id="矩形" stroke="#979797" stroke-width="5" fill="#FFFFFF"/>
                      <circle id="椭圆形" stroke="#979797" stroke-width="4" cx="17" cy="23" r="6"/>
                      <path d="M285,61 C286.104569,61 287,61.8954305 287,63 L286.999,67 L291,67 C292.104569,67 293,67.8954305 293,69 C293,70.1045695 292.104569,71 291,71 L286.999,71 L287,75 C287,76.1045695 286.104569,77 285,77 C283.895431,77 283,76.1045695 283,75 L282.999,71 L279,71 C277.895431,71 277,70.1045695 277,69 C277,67.8954305 277.895431,67 279,67 L282.999,67 L283,63 C283,61.8954305 283.895431,61 285,61 Z" id="形状结合" fill="#979797"/>
                      <path d="M37.5,150 C38.3284271,150 39,150.671573 39,151.5 L39,155 L42.5,155 C43.3284271,155 44,155.671573 44,156.5 C44,157.328427 43.3284271,158 42.5,158 L38.999,158 L39,161.5 C39,162.328427 38.3284271,163 37.5,163 C36.6715729,163 36,162.328427 36,161.5 L35.999,158 L32.5,158 C31.6715729,158 31,157.328427 31,156.5 C31,155.671573 31.6715729,155 32.5,155 L36,155 L36,151.5 C36,150.671573 36.6715729,150 37.5,150 Z" id="形状结合备份" fill="#979797"/>
                      <rect id="矩形" fill="#979797" x="104" y="91" width="107" height="4" rx="2"/>
                      <rect id="矩形备份-3" fill="#979797" x="104" y="121" width="45.5" height="4" rx="2"/>
                      <g id="search" transform="translate(205.000000, 225.500000) rotate(-45.000000) translate(-205.000000, -225.500000) translate(156.000000, 144.000000)" fill="#FFFFFF" stroke="#979797" stroke-width="4">
                          <circle id="椭圆形" cx="49" cy="49" r="47"/>
                          <circle id="椭圆形备份" cx="49" cy="49" r="37"/>
                          <rect id="矩形" x="44" y="96" width="10" height="13"/>
                          <path d="M57,109 L57,153 C57,155.209139 56.1045695,157.209139 54.6568542,158.656854 C53.209139,160.104569 51.209139,161 49,161 C46.790861,161 44.790861,160.104569 43.3431458,158.656854 C41.8954305,157.209139 41,155.209139 41,153 L41,153 L41,109 L57,109 Z" id="矩形"/>
                          <rect id="矩形备份-4" x="41" y="109" width="16" height="10"/>
                      </g>
                      <text id="?" opacity="0.5" font-family="PingFangSC-Semibold, PingFang SC" font-size="47" font-weight="500" fill="#979797">
                          <tspan x="169" y="221">?</tspan>
                      </text>
                  </g>
              </g>
          </g>
        </svg>
        <div>搜索没有结果，请换个名称试试</div>
      </div>
    </div>
  </div>
</template>

<script>
import icons from './requireIcons'
export default {
  name: 'IconSelect',
  data() {
    return {
      name: '',
      iconList: icons
    }
  },
  methods: {
    filterIcons() {
      this.iconList = icons
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name))
      }
    },
    selectedIcon(name) {
      this.$emit('selected', name)
      document.body.click()
    },
    reset() {
      this.name = ''
      this.iconList = icons
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .icon-body {
    width: 100%;
    padding: 10px;
    .icon-list {
      max-height: 200px;
      min-height: 100px;
      overflow-y: auto;
      margin-top: 10px;
      .list_option {
        height: 30px;
        line-height: 30px;
        margin-bottom: -5px;
        cursor: pointer;
        width: 33%;
        display: inline-block;
      }
      svg{
        float: left;
      }
      span {
        width: calc(100% - 30px);
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        margin-left: 24px;
      }
      .noData{
        text-align: center;
        div{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 22px;
        }
      }
    }
  }
</style>
